<template>
	<!--当前页面为项目需要的sidebar-->
	<view class="comp-item-sidebar-box" @click.stop>
		<view class="avatar-item">
			<!--<u-avatar
				:src="'/static/images/missing-face.png'"
				size="50"
			></u-avatar>-->
			<view class="u-avatar">
				<image src="/static/images/missing-face.png" mode="aspectFill"></image>
			</view>
			<view class="avatar-no f13">
				6646456466
			</view>
		</view>
		<view class="sidebar-items">
			<u-cell-group :border="false">
				<u-cell title="首页" isLink></u-cell>
				<u-cell title="通知消息" isLink></u-cell>
				<u-cell title="请假信息" isLink></u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		name: "c-item-sidebar",
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	@keyframes slideLeft {
		from {
			margin-left: -200px;
		}
		to {
			margin-left: 0px;
		}
	}
	.comp-item-sidebar-box {
		animation: slideLeft;
		animation-duration: 0.5s;
		width: 200px;
		height: 100%; //calc(100vh - 96px);
		border-right: 1px solid #EEEEEE;
		border-bottom: 1px solid #EEEEEE;
		background: #FFFFFF;
		.avatar-item {
			height: 120px;
			padding-top: 30px;
			text-align: center;
			.u-avatar {
				margin: 10px auto 10px !important;
				width: 50px;
				height: 50px;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.avatar-no {
			display: inline-block;
			padding: 4px 0;
			width: 110px;
			text-align: center;
			background-color: #f1f1f1;
			border: 1px solid #f1f1f1;
			border-radius: 50rpx;
		}
		.sidebar-items {
			height: calc(100% - 190px);
			overflow: auto;
			/deep/ .u-cell__title-text {
				font-size: 14px;
			}
			/deep/ .u-cell__title-text::before {
				content: "";
				display: inline-block;
				margin-right: 6px;
				width: 5px;
				height: 5px;
				border-radius: 5px;
				background: $uni-color-base;
			}
		}
	}
	
</style>
<style>
	
</style>
